<template>
	<view class="editInfo">
		<view class="editInfo-form">
			<uv-form labelPosition="left" :model="otherUserForm" ref="form">
				<uv-form-item label="性别" prop="gender" borderBottom @click="()=>{
						$refs.genderPicker.open()
					}">
					<uv-picker ref="genderPicker" :columns="genderList" @confirm="PickerGender"></uv-picker>
					<uv-input v-model="otherUserForm.want_gender" disabled disabledColor="#ffffff" placeholder="请选择" border="none"
						inputAlign="right">
					</uv-input>
					<template v-slot:right>
						<uv-icon name="arrow-right"></uv-icon>
					</template>
				</uv-form-item>

				<uv-form-item label="年份" labelWidth="100" borderBottom >
					<uv-input placeholder="请输入一个区间，例如：1991-2022" border="none" v-model="otherUserForm.want_year"
						inputAlign="right">
						<template v-slot:suffix>
							<text>年</text>
						</template>
					</uv-input>
				</uv-form-item>
				<uv-form-item label="所在地区" labelWidth="100" prop="userInfo.region" borderBottom>
					<pick-regions :defaultRegion="otherUserForm.want_region" @getRegion="handleGetRegion" ref="pickRegionsRef">
						<uv-text :lines="1" :text="otherUserForm.regionName"></uv-text>
					</pick-regions>
					<template v-slot:right>
						<uv-icon name="arrow-right"></uv-icon>
					</template>
				</uv-form-item>

				<uv-form-item label="身高" borderBottom>
					<uv-input placeholder="请输入一个区间，例如：160-180" border="none" v-model="otherUserForm.want_height"
						inputAlign="right">
						<template v-slot:suffix>
							<text>cm</text>
						</template>
					</uv-input>
				</uv-form-item>
				<uv-form-item label="体重" borderBottom>
					<uv-input placeholder="请输入一个区间，例如：40-50" border="none" v-model="otherUserForm.want_weight" 
						inputAlign="right">
						<template v-slot:suffix>
							<text>kg</text>
						</template>
					</uv-input>
				</uv-form-item>
				<uv-form-item label="学历" prop="userInfo.degree" borderBottom @click="()=>{
						$refs.degreePicker.open()
					}">
					<uv-picker ref="degreePicker" :columns="degreeList" @confirm="degreeChange" :defaultIndex="[3]"></uv-picker>
					<uv-input v-model="otherUserForm.want_degree" disabled disabledColor="#ffffff" placeholder="请选择" border="none"
						inputAlign="right">
					</uv-input>
					<template v-slot:right>
						<uv-icon name="arrow-right"></uv-icon>
					</template>
				</uv-form-item>
				<uv-form-item label="收入(年薪)" labelWidth="100" prop="userInfo.income" borderBottom @click="()=>{
						$refs.incomePicker.open()
					}">
					<uv-picker ref="incomePicker" :columns="incomeList" @confirm="incomeChange" :defaultIndex="[0]"></uv-picker>
					<uv-input v-model="otherUserForm.want_income" disabled disabledColor="#ffffff" placeholder="请选择" border="none"
						inputAlign="right">
					</uv-input>
					<template v-slot:right>
						<uv-icon name="arrow-right"></uv-icon>
					</template>
				</uv-form-item>

				<uv-form-item label="性格" prop="userInfo.character" borderBottom>
					<uv-input v-model="otherUserForm.want_character" border="none" inputAlign="right">
					</uv-input>
				</uv-form-item>
				<view style="margin: 10px 0;color: #666;">
					<view>其他</view>
					<uv-textarea v-model="otherUserForm.want_other" border="bottom" :disabled="modalName!=null" maxlength="200"
						count></uv-textarea>
				</view>
				<view class="submit-button">
					<uv-button type="primary" text="保存" shape="circle" customStyle="margin-top: 10px"
						@click="saveProfile" color="linear-gradient(90deg, #d3e5f3, #abc1eb)"></uv-button>
				</view>


			</uv-form>
		</view>


	</view>
</template>

<script>
	import Compressor from 'compressorjs';
	import pickRegions from '@/components/pick-regions/pick-regions.vue'
	import {
		editProfile
	} from '@/api/account';
	import {
		apiUrl
	} from '@/config/server.config';
	import {
		timeFormat
	} from '@/uni_modules/uv-ui-tools/libs/function/index.js';
	export default {
		components: {
			pickRegions
		},
		props: ['otherUserForm', 'userForm'],
		data() {
			return {
				genderList: [
					['男', '女']
				],
				degreeList: [
					['小学', '初中', '高中', '大专', '本科', '硕士', '博士']
				],
				incomeList: [
					['5万以下', '5万-10万', '10万-15万', '15万-20万', '20万-30万', '30-40万', '40-50万', '50-100万', '100万以上']
				],
				modalName: null,


			};
		},
		created(){
			this.otherUserForm.regionName = this.otherUserForm.want_region.join('，')
			// this.otherUserForm.regionName = this.otherUserForm.want_region
	
		},
		methods: {
	
			// 获取选择的地区
			handleGetRegion(region) {
				this.otherUserForm.want_region = region.map(item => item.name)
			
				this.otherUserForm.regionName = this.otherUserForm.want_region.join('，')
		
				// console.log(this.otherUserForm.want_region)
			
			},
			PickerGender(e) {
				// 选择性别
				this.otherUserForm.want_gender = e.value[0]

			},
			degreeChange(e) {
				// 选择学历
				this.otherUserForm.want_degree = e.value[0]
			},
			incomeChange(e) {
				// 选择年薪
				this.otherUserForm.want_income = e.value[0]
			},
			showToastIfEmpty(field, message) {
			
				 if (typeof field === 'string') {
				    field = field.trim();
				  }
				  if (!field) {
				    uni.showToast({
				      title: message,
				      icon: 'none'
				    });
				    return true;
				  }

				return false;
			},
			saveProfile() {

				if (!this.tool.checkNickname(this.userForm.nick_name)) {
					return
				}
				if (
					this.showToastIfEmpty(this.userForm.avatar, '请选择头像') ||
					this.showToastIfEmpty(this.userForm.gender, '请选择性别') ||
					this.showToastIfEmpty(this.userForm.birthday, '请选择出生日期') ||
					this.showToastIfEmpty(this.userForm.height, '请填写身高') ||
					this.showToastIfEmpty(this.userForm.weight, '请填写体重') ||
					this.showToastIfEmpty(this.userForm.wechat_id, '请填写微信号') ||
					this.showToastIfEmpty(this.userForm.character, '请填写性格') ||
					this.showToastIfEmpty(this.userForm.hobby, '请填写爱好')) {
					return
				} 
				if (this.userForm.photos.length == 0) {
					uni.showToast({
						title: '至少上传一张生活照',
						icon: 'none'
					});
					return
				} 
				 if (this.userForm.identity_photos.length == 0) {
					uni.showToast({
						title: '请上传您的身份信息',
						icon: 'none'
					});
					return
				} 
				if (this.userForm.degree_photos.length == 0) {
					uni.showToast({
						title: '请上传您的学历信息',
						icon: 'none'
					});
					return
				} 
				 if (this.userForm.income_photos.length == 0) {
					uni.showToast({
						title: '请上传您的收入凭证',
						icon: 'none'
					});
					return
				}
				
				
				// if(this.showToastIfEmpty(this.otherUserForm.want_gender, '请选择他/她的性别') ||
				// this.showToastIfEmpty(this.otherUserForm.want_year, '请输入他/她的年份') ||
				// this.showToastIfEmpty(this.otherUserForm.want_height, '请输入他/她的身高') ||
				// this.showToastIfEmpty(this.otherUserForm.want_weight, '请输入他/她的体重') ||
				// this.showToastIfEmpty(this.otherUserForm.want_character, '请输入他/她的性格') 
				// ){
				// 	return
				// }

this.userForm.height =  Number(this.userForm.height);
this.userForm.weight = this.userForm.weight +'kg'

const info = {...this.userForm,...this.otherUserForm}
console.log(info)

				editProfile(info).then(res => {
					uni.showToast({
						title: '保存成功',
						icon: 'none'
					});
					// 跳转首页
					setTimeout(()=>{
						uni.navigateTo({
							url: '/pages/index/index' // 跳转到对应路径的页面
						});
					},200)
					
				}).catch(err => {
					uni.showToast({
						title: '保存失败',
						icon: 'none'
					});
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.editInfo {
		background-color: #fff;
		min-height: 95vh;

		.editInfo-form {
			// border-radius: 20px;
			padding: 10px 20px;

			::v-deep .uv-form-item__body__right__content__slot {
				justify-content: flex-end;
			}

			::v-deep .uv-form-item__body__left__content__label {
				color: #666;
				font-size: 14px;
			}

			::v-deep .uv-form-item__body__right__message {
				text-align: right;
			}

			::v-deep .uv-divider {
				margin: 5px 0;
			}

			.avatar-button {}

			.avatar-button button {
				width: 100%;
				height: 100%;
				border-radius: inherit;
				background-position: center;
				background-size: cover;
				outline: none;
				/* 去除焦点边框 */
			}
		}
	}

	.bg-white {
		min-height: 20px;
	}

	.cu-form-group .title {
		min-width: calc(4em + 15px);
	}

	.submit-button {
		position: absolute;
		width: 90%;
		bottom: 10px;
	}
</style>